$(function() {
	// 按回车触发事件
	load()
	$('#title').on('keydown', function(e) {
		if (e.keyCode === 13) {
			let Local = getLocalData()
			// 按下回车将输入框的数据保存在本地中
			if ($(this).val().trim() === '') return alert('输入框不能为空呦')
			let item = {
				'title': $(this).val().trim(),
				done: false
			}
			Local.push(item)
			$(this).val('')
			saveLocalData(Local)
			// 按下回车将本地数据渲染到页面上
			load()
		}
	})
	// 点击按钮删除数据
	$('ol,ul').on('click', 'a', function() {
		let data = getLocalData()
		// 获取数据在内存中的下标值
		let index = $(this).attr('index')
		// 根据下标值删除对应的数据
		data.splice(index, 1)
		saveLocalData(data)
		load()
	})

	// 点击复选框修改done 的值
	$('ol,ul').on('click', 'input', function() {
		let data = getLocalData()
		// 根据兄弟节点a 的index属性  获取到该条数据的下标
		let index = $(this).siblings('a').attr('index')
		// 将复选框的状态值保存起来
		data[index].done = $(this).prop('checked')
		saveLocalData(data)
		load()
	})

	// 读取本地数据
	function getLocalData() {
		let data = localStorage.getItem('toduList')
		// 判断本地toduList 数据是否为空
		if (data !== null) {
			return JSON.parse(data)
		}
		return []
	}
	// 保存数据到本地
	function saveLocalData(data) {
		localStorage.setItem('toduList', JSON.stringify(data))
	}

	// 加载本地数据到页面
	function load() {
		let data = JSON.parse(localStorage.getItem('toduList'))
		// 在遍历数据之前必须将ol 中的子节点清除 防止 重复渲染数据
		$('ol,ul').empty()
		// 代办的个数
		let toduCount = 0
		// 已经完成的个数
		let doneCount = 0
		$.each(data, function(index, item) {
			// console.log(index,item)
			if (item.done) {
				doneCount++
				$('ul').prepend("<li><input type='checkbox' checked='true'></input><p>" + item.title +
					"</p><a href='javascript:;' index=" +
					index + "></a></li>")
			} else {
				toduCount++
				$('ol').prepend("<li><input type='checkbox'></input><p>" + item.title + "</p><a href='javascript:;' index=" +
					index + "></a></li>")
			}

		})
		
		$('#todocount').text(toduCount)
		$('#donecount').text(doneCount)
	}
})
